<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <title>只有功能展示，没有美化</title>
</head>
<body style="height: 100%;">
    <div id="indexPage">
        <div class="center">
            <div class="center-left">
                <p style="text-align: center; padding-top: 10px;">博客日历</p>
                <el-calendar v-model="date" />
            </div>
            <div class="center-right">
                <div class="nav">
                    <a href="">首頁</a>
                    ->
                    <a href="">文章列表</a>
                </div>
                <div class="news-pad">
                    <div class="news-item" v-for="news in newsInfo">
                        <p class="news-name">{{news.title}}</p>
                        <p class="news-key">{{tranKey(news.key)}}</p>
                        <p class="news detail">
                            <span>阅读&ensp;[{{news.hit}}]&ensp;</span>
                            <span>评论&ensp;[{{news.replyCount}}]&ensp;</span>
                            <span>时间&ensp;[{{tranTime(news.publishTime)}}]&ensp;</span>
                            <!-- `./news_detail.html?nid=${news.id}` -->
                            <a href="javasript:;" @click="toDetail(news.id)">阅读全文</a>
                        </p>
                    </div>
                </div>
                <div class="demo-pagination-block">
                    <el-pagination
                      :page-sizes="[1, 5, 10, 20]"
                      :small="small"
                      :disabled="disabled"
                      :default-page-size="5"
                      :background="background"
                      layout="sizes, prev, pager, next"
                      :total="total"
                      @size-change="onSizeChange"
                      @current-change="onPageChange"
                    />
                  </div>
            </div>
        </div>
    </div>
</body>

<script>
    const {createApp, ref, onMounted } = Vue;
    const app = createApp({
            setup() {
                const newsInfo = ref()
                const pageSize = ref(5)
                const total = ref(0)
                const date = ref(new Date())
                const tranKey =(key) =>
                {
                   return key.replaceAll(",","，");
                } 
                const tranTime =(time) => {
                    return time.replaceAll("T"," ");
                }
                const onPageChange = (pageIndex) =>{
                    //http://localhost:5143/api/News/GetNewsDtoList?pageIndex=1&pageSize=5
                    axios.get(`http://localhost:5143/api/News/GetNewsDtoList?pageIndex=${pageIndex}&pageSize=${pageSize.value}`).then(res => {
                        newsInfo.value = res.data;
                        console.log(res)
                    })
                }
                const onSizeChange = (size) =>{
                    pageSize.value = size;
                    //http://localhost:5143/api/News/GetNewsDtoList?pageIndex=1&pageSize=5
                    axios.get(`http://localhost:5143/api/News/GetNewsDtoList?pageIndex=1&pageSize=${pageSize.value}`).then(res => {
                        newsInfo.value = res.data;
                    })
                }
                const toDetail = (nid) =>{
                    parent.location.href = `./layout.html#/news_detail.html?nid=${nid}`
                    top.window.history.go(0);
                }
                onMounted(() =>{
                    //http://localhost:5143/api/News/GetNewsDtoList?pageIndex=1&pageSize=5
                    axios.get(`http://localhost:5143/api/News/GetNewsDtoList?pageIndex=1&pageSize=${pageSize.value}`).then(res => {
                        newsInfo.value = res.data;
                    })
                    axios.get(`http://localhost:5143/api/News/GetTotalCount/Count`).then(res => {
                        total.value = res.data;
                    })
                })
                return{
                    newsInfo,
                    tranKey,
                    tranTime,
                    // onPrev,
                    // onNext,
                    onPageChange,
                    onSizeChange,
                    total,
                    toDetail
                };
            }
        }
    )
    app.use(ElementPlus, {
    locale: ElementPlusLocaleZhCn,
    })
    app.mount("#indexPage")
</script>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #indexPage{
        height: 100%;
    }
    #indexPage .top{
        background-color: cornflowerblue;
        height: 200px;
        position: relative;
    }

    #indexPage .top .top-menu{
        float:right
    }
    #indexPage .top .top-menu .li{
        float:left;
        list-style: none;
        margin-right: 10px;
    }
    #indexPage .top .Login-pad{
        position: absolute;
        bottom: 0;
        right: 0;
        height: 46px;
        padding: 10px;
        padding-bottom: 6px;
        border-radius: 6px 0 0 0;
        background-color: beige;
    }
    #indexPage .center{
        display: flex;
        height: 100%;
    }
    #indexPage .center .center-left{
        height: 100%;
        width: 350px;
        border-right: 1px solid #eee;
    }
    #indexPage .center .center-right{
        flex: 1;
    }
    #indexPage .center .center-right .nav{
        background-color: #eee;
        height: 30px;
        width: 100%;
        line-height: 30px;
        padding-left: 10px;
    }
    #indexPage .center .center-right .news-pad .news-item p{
        text-align: center;
    }
    #indexPage .center .center-right .news-pad .news-item .news-name{
        line-height: 30px;
        background-color: bisque;
        height: 30px;
        font-weight: 600;
    }
    #indexPage .center .center-right .news-pad .news-item .news-key{
        background-color:aqua;
        height: 25px;
    }

    .example-pagination-block + .example-pagination-block {
    margin-top: 10px;
    }
    .example-pagination-block .example-demonstration {
    margin-bottom: 16px;
    }
</style>
</html>